import React from 'react';
import User from './user';
import Book from './book';
import { connect } from 'react-redux';
import * as css from './style';
import * as action from '../../redux/action';

class Main extends React.Component {

    constructor(props) {
        super(props);
        this.switchSpread = this.switchSpread.bind(this);
    }

    shouldComponentUpdate(nextProps) {
        return nextProps.asideIsSpread !== this.props.asideIsSpread;
    }

    switchSpread(e) {
        if (this.props.asideIsSpread === true) {
            // 如果有来自main的点击事件，并且来源不是查看图书详情的按钮，则隐藏Aside
            if (e.target.getAttribute('data-type') !== 'morebtn') {
                this.props.hideAside();
            }
        }
    }

    render() {
        return (
            <div className={ css.main } data-offset={ this.props.asideIsSpread }
                onClickCapture={ this.switchSpread }>
                <User />
                <Book />
            </div>
        )
    }
}

export default connect(state => ({
    asideIsSpread: state.ASIDE.getIn(['unrender', 'isSpread'])
}), action)(Main);
